import React, { PureComponent } from 'react'
import { CSSTransition } from 'react-transition-group';
import {
  HeaderWrapper,
  HeaderWLimit,
  Logo,
  Nav,
  NavItem,
  SearchWrapper,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoLeft,
  SearchInfoRight,
  SearchInfoMain,
  SearchInfoMainItemWrapper,
  SearchInfoMainItem,
  NavSearch,
  Addition,
  Button
} from './style'
import { connect } from 'react-redux'
import { actionCreator } from './store'
import { actionCreator as LoginActionCreator } from '../../page/login/store'
import { Link } from 'react-router-dom'

class Header extends PureComponent {
  render() {
    const { focused, list, loginStatus, handleSearchFocus, handleSearchBlur, logout } = this.props;
    return (
      <HeaderWrapper>
        <HeaderWLimit>
          <Link to='/'>
            <Logo></Logo>
          </Link>
          <Nav>
            <Link to='/'>
              <NavItem className="left">首页</NavItem>
            </Link>
            <NavItem className="left">下载App</NavItem>
            <Link to='/login'>

              <NavItem
                className="right"
                onClick={() => logout(loginStatus)}
              >{loginStatus ? '退出' : '登录'}</NavItem>
            </Link>
            <NavItem className="right"><i className="iconfont">&#xe636;</i></NavItem>
            <SearchWrapper>
              <CSSTransition
                in={focused}
                timeout={300}
                classNames="slide"
              >
                <NavSearch
                  className={focused ? 'focused' : ''}
                  onFocus={() => { handleSearchFocus(list) }}
                  onBlur={handleSearchBlur}
                ></NavSearch>
              </CSSTransition>
              <i className="iconfont">&#xe637;</i>
              {this.getSearchInfo()}
            </SearchWrapper>
          </Nav>
          <Addition>
            <Button><i className="iconfont">&#xe62b;</i> 写文章</Button>
            <Button>注册</Button>
          </Addition>
        </HeaderWLimit>
      </HeaderWrapper>
    )
  }
  getSearchInfo() {
    const { focused, mouseIn, list, page, pageTotal, handleMouseEnter, handleMouseLeave, handleClickChange } = this.props,
      jsList = list.toJS(), searchItems = [];
    for (let i = page * 10; i < (page + 1) * 10 && i < jsList.length; i++) {
      searchItems.push(
        <SearchInfoMainItem key={jsList[i]}>{jsList[i]}</SearchInfoMainItem>
      )
    }
    if (focused || mouseIn) {
      return (
        <SearchInfo
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <SearchInfoTitle>
            <SearchInfoLeft>热门搜索</SearchInfoLeft>
            <SearchInfoRight
              onClick={() => handleClickChange(page, pageTotal, this.rotateIcon)}
            >
              <i
                className="iconfont change-transform-rotate"
                ref={(rotateIcon) => { this.rotateIcon = rotateIcon }}
              >
                &#xe851;
              </i>换一批
          </SearchInfoRight>
          </SearchInfoTitle>
          <SearchInfoMain>
            <SearchInfoMainItemWrapper>
              {searchItems}
            </SearchInfoMainItemWrapper>
          </SearchInfoMain>
        </SearchInfo>
      )
    } else {
      return null
    }
  }
}

const mapStateToProps = (state) => {
  return {
    focused: state.getIn(['header', 'focused']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    list: state.getIn(['header', 'list']),
    pageTotal: state.getIn(['header', 'pageTotal']),
    page: state.getIn(['header', 'page']),
    loginStatus: state.getIn(['login', 'loginStatus'])
  }
}

const mapDispatchToProps = (dispatch) => ({
  handleSearchFocus(list) {
    if (!list.size) {
      dispatch(actionCreator.getListInfo())
    }
    dispatch(actionCreator.getInputFocus())
  },
  handleSearchBlur() {
    dispatch(actionCreator.getInputBlur())
  },
  handleMouseEnter() {
    dispatch(actionCreator.getMouseEnter())
  },
  handleMouseLeave() {
    dispatch(actionCreator.getMouseLeave())
  },
  handleClickChange(page, pageTotal, rotateIcon) {
    let originAngle = parseInt(rotateIcon.style.transform.replace(/[^0-9]/ig, ''));
    if (!originAngle) {
      originAngle = 720;
    } else {
      originAngle += 720;
    }
    console.log(originAngle);
    rotateIcon.style.transform = 'rotate(' + originAngle + 'deg)'
    page = page === (pageTotal - 1) ? 0 : ++page
    dispatch(actionCreator.getNextList(page))
  },
  logout(loginStatus) {
    if (loginStatus){
      debugger;
      dispatch(LoginActionCreator.changeLoginStatus(false))
    }
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Header)
